import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import { Collapse } from 'antd';
import Base from '../../../components/Add/base';
import EnterParams from './enterParam';
import ConstantParam from './constantParam';
import CalculateCost from './calculateCost';
import DataSourceOrder from './dataSourceOrder';

const DefineInterface = forwardRef((props, ref) => {
  const { interfaceType } = props;
  const enterParamRef = useRef();
  const calculateCostRef = useRef();
  const dataSourceOrderRef = useRef();

  useImperativeHandle(ref, () => ({
    getDiData: () => ({
      thirdInterfaceList: dataSourceOrderRef.current.getData(),
      params: enterParamRef.current.getData(),
      feeRules: calculateCostRef.current.getData(),
    }),
  }));
  const renderInterfaceNode = [
    {
      title: '基础配置',
      component: <Base {...props} />,
    },
    {
      title: interfaceType ? '数据源顺序' : '数据源权重',
      component: <DataSourceOrder {...props} ref={dataSourceOrderRef} />,
    },
    {
      title: '数据源入参配置',
      component: <EnterParams {...props} ref={enterParamRef} />,
    },
    {
      title: '常用参数',
      component: <ConstantParam {...props} />,
    },
    {
      title: '计费配置',
      component: <CalculateCost {...props} ref={calculateCostRef} />,
    },
  ];

  return (
    <>
      <Collapse defaultActiveKey={[0, 1, 2, 3, 4]} bordered={false} expandIconPosition='right' ghost={true}>
        {renderInterfaceNode.map((item, index) => (
          <Collapse.Panel header={item.title} key={index}>
            {item.component}
          </Collapse.Panel>
        ))}
      </Collapse>
    </>
  );
});
export default DefineInterface;
